<template>
  <div class="container">
    <div class="swiper">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#3ACE8A">
        <van-swipe-item v-for="(image, index) in data.imgs" :key="index">
          <img :src="image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="content">
      <div class="name">{{ data.name }}</div>
      <div class="number">商品编号：{{ data.goods_num }}</div>
      <div class="number">商 家：{{ data.username }}</div>
      <div class="mouny">
        <div>价格：</div>
        <div class="text">
          ￥
          <span style="font-size: 2.3em; margin-left: 20px">{{
            data.price
          }}</span>
        </div>
      </div>
      <div class="stock">
        <span style="color: #333333; margin-right: -25%">购买数量</span
        >库存数量：{{ data.kucun }}
        <van-stepper v-model="stock" min="0" :max="data.kucun" integer />
      </div>
    </div>

    <div class="comContent">
      <div class="comTitle">商品详情</div>
      <div v-html="data.content" style="margin-top: 20px"></div>
    </div>

    <div class="buttonList">
      <div @click="returnFn">返回列表</div>
      <div @click.once="addFn">购买商品</div>
    </div>
  </div>
</template>

<script>
import { imgUrl, addOrder, getGoodsInfo, getOrderList } from "../../api/api";
export default {
  data() {
    return {
      data: {},
      stock: 1,
      imgUrl: imgUrl,
    };
  },
  methods: {
    getNum() {
      console.log(this.data.stock);
    },
    returnFn() {
      this.$router.go(-1);
    },
    getGoodInfo() {
      const data = {
        user_id: localStorage.getItem("userId"),
        status: 0,
        page: 1,
        pagesize: 5,
      };
      getOrderList(data).then((res) => {
        this.$toast.clear();
        console.log("订单列表接口---", res.data);
        const item = {
          order_num: res.data.rows[0].out_trade_no,
          order_id: res.data.rows[0].id,
        };
        console.log(JSON.stringify(item));
        this.$router.push({
          path: `/commodity`,
          query: {
            item: JSON.stringify(item),
          },
        });
      });
    },
    addFn() {
      // if(this.data.user_id == localStorage.getItem('userId')) return this.$toast.fail('禁止重复购买')
      if (this.data.kucun == 0) return this.$toast.fail("库存为0");
      this.$route.query.item = this.data;
      let data = {
        user_id: localStorage.getItem("userId"),
        goods_id: this.data.id,
        price: this.stock * this.data.price,
        pay_num: this.stock,
      };
      addOrder(data).then((res) => {
        this.$toast.clear();
        if (res.msg === "银行卡不存在") {
          this.$toast.fail(res.msg);
          return setTimeout(() => {
            return this.$router.push(`/binding`);
          }, 2000);
        }
        console.log("添加订单接口---", res);
        if (res.msg == "您有未支付订单，无法购买该产品")
          return this.$dialog
            .alert({
              message: "您还有未支付的订单,点击确定去支付吧",
              theme: "round-button",
            })
            .then(() => {
              this.getGoodInfo();
            });
        this.$router.push({
          path: `/commodity`,
          query: {
            item: JSON.stringify(res.data),
          },
        });
      });
    },

    getInfo() {
      const data = {
        user_id: localStorage.getItem("userId"),
        goods_id: JSON.parse(this.$route.query.item).id,
      };
      getGoodsInfo(data).then((res) => {
        this.$toast.clear();
        this.data = res.data;
        this.data.imgs = this.data.imgs.split(",");
        this.data.imgs.map((item, index) => {
          this.data.imgs[index] = imgUrl + item;
          console.log(item);
        });
        console.log("获取商品详情---", res);
      });
    },
  },
  mounted() {
    this.getInfo();
    // this.data = JSON.parse(this.$route.query.item)
    // console.log(this.data)
    // this.data.imgs = this.data.imgs.split(",");
    // this.data.imgs.map((item, index) => {
    //   this.data.imgs[index] = imgUrl + item;
    //   console.log(item);
    // });
    console.log("data---", this.data);
  },
};
</script>

<style lang="less" scoped>
div {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  .swiper {
    width: 100%;
    height: 250px;

    .my-swipe {
      width: 100%;
      height: 100%;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .content {
    width: 100%;
    padding: 0 3%;

    .name {
      margin-top: 15px;
      letter-spacing: 1px;
      font-weight: 700;
      font-size: 1.1em;
      color: #000;
    }
    .number {
      margin-top: 15px;
      color: #999999;
      font-size: 0.6em;
    }
    .mouny {
      margin-top: 20px;
      color: #999999;
      font-size: 0.6em;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .text {
        color: #dd0000;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .stock {
      margin-top: 20px;
      color: #999999;
      font-size: 0.6em;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 20px;
      border-bottom: 1px solid #e5e5e5;
    }
    .entrust {
      margin-top: 20px;
      color: #999999;
      font-size: 0.6em;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .check {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-top: 20px;

      /deep/ .van-checkbox__label {
        color: #333333;
        font-size: 0.9em;
      }
    }
  }
  .comContent {
    width: 100%;
    padding: 0 3%;

    .comTitle {
      margin-top: 20px;
      color: #333333;
      font-size: 1em;
      letter-spacing: 0.5px;
    }
  }
  .buttonList {
    width: 100%;
    height: 50px;
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    div {
      width: 50%;
      height: 100%;
      text-align: center;
      line-height: 50px;
      letter-spacing: 1px;
      font-size: 1em;
    }

    div:nth-child(1) {
      background-color: #fff;
      border-top: 1px solid #ece7e7;
      color: #dd0000;
    }

    div:nth-child(2) {
      background-color: #dd0000;
      color: #fff;
    }
  }
  /deep/ .van-popup--center {
    border-radius: 10px;
    padding: 20px 20px 40px 20px;

    .text {
      margin-top: 10px;
      color: #333333;
      font-size: 1.1em;
    }
  }
}
</style>